<template>
	
	<div class="all">
		<div class="header">
			<span class="left">体育馆管理系统</span>
			<div class="right">
				<div class="menu">
					<el-menu router background-color="#e6f5ff" default-active="1" class="el-menu-demo" mode="horizontal">
					  <el-menu-item index="/ground_ui"><span class="menu-item">场地</span></el-menu-item>
					  <el-menu-item index="2"><span class="menu-item">赛事</span></el-menu-item>
					  <el-menu-item index="3"><span class="menu-item">商品</span></el-menu-item>
					  <el-menu-item index="4"><span class="menu-item">个人中心</span></el-menu-item>
					</el-menu>
				</div>
				
			</div>
		</div>
		<div class="main">
			<div class="block">
				<el-carousel height="80vh" class="carousel">
					<el-carousel-item  v-for="item in imgList" :key="item.id">
						<el-image  :src="item.img" fit="fill" />
				    </el-carousel-item>
				</el-carousel>
			</div>
			<div class="block2">
				<div class="ground-title">
					<div class="hot-ground">热门场地</div>
					<div class="all-ground">查看全部场地>></div>
				</div>
				<div class="ground-content">
					<div @click="showGround" class="one" v-for="item in ground" :key="item.id">
						<img class="ground-img" :src="item.photo"/>
						<div class="ground-name">{{item.name}}</div>
						<div class="ground-price">
							￥{{item.new_money}}
							<span style="text-decoration: line-through;">￥{{item.old_money}}</span>
						</div>
						<div class="ground-content">{{item.content}}</div>
					</div>
				</div>
				<div class="ground-title">
					<div class="hot-ground">热门比赛</div>
					<div class="all-ground">查看全部比赛>></div>
				</div>
				<div class="competition-content">
					<div class="one" v-for="item in competition" :key="item.id">
						<img class="competition-img" :src="item.photo"/>
						<div class="competition-name">{{item.name}}</div>
						<div class="competition-price">
							￥{{item.new_money}} 
							<span style="text-decoration: line-through;">￥{{item.old_money}}</span>
						</div>
						<div class="competition-content">{{item.content}}</div>
					</div>
				</div>
				<div class="ground-title">
					<div class="hot-ground">热门商品</div>
					<div class="all-ground">查看全部商品>></div>
				</div>
				<div class="product-content">
					<div class="one" v-for="item in product" :key="item.id">
						<img class="product-img" :src="item.photo"/>
						<div class="product-name">{{item.name}}</div>
						<div class="product-price">
							￥{{item.new_money}}
							<span style="text-decoration: line-through;">￥{{item.old_money}}</span>
						</div>
						<div class="product-content">{{item.content}}</div>
					</div>
				</div>
				
			</div>
			
			
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		data(){
			  return{
				  //轮播图
				 imgList:[],
				 //场地
				 ground:[],
				 //比赛
				 competition:[],
				 //商品
				 product:[]
			  }
		},
		created () {
			axios({
				url:'/api/carousel/selectAll',
				method:'get',
			}).then(response=>{
				console.log(response)
				this.imgList = response.data.carouselList

			}),
			axios({
				url:'/api/ground/selectForHot',
				method:'get',
			}).then(response=>{
				console.log(response)
				this.ground = response.data.list
			
			}),
			axios({
				url:'/api/competition/selectForHot',
				method:'get',
			}).then(response=>{
				console.log(response)
				this.competition = response.data.list
			
			}),
			axios({
				url:'/api/product/selectForHot',
				method:'get',
			}).then(response=>{
				console.log(response)
				this.product = response.data.list
			
			})
		},
		methods:{
			showGround(){
				this.$router.push({
					path:'/ground_ui',
					params:{
						
					}
				})
			}
		}
	}
</script>

<style>
	.all{
		background-color: #e6f5ff;
	}
	.header{
		width: 100vw;
		height: 100px;
	}
	.main,.carousel{
		width: 100vw;
		height: 480px;
	}
	.left{
		float: left;
		width: 29%;
		text-align: center;
		line-height: 100px;
		font-size: 30px;
	}
	.carousel{
		overflow: hidden;
	}
	.right{
		float: right;
		width:70%;
		line-height: 100px;
		margin-top: 20px;
	}
	.el-menu-demo{
		padding-left: 340px;
	}
	.menu-item{
		font-size: 20px;
	}
	.el-image{
		width: 100%;
	}
	.block2{
		/* border: 1px solid red; */
		width: 80vw;
		margin-left: auto;
		margin-right: auto;
	}
	.ground-title{
		margin-top: 30px;
	}
	.hot-ground{
		float: left;
		width: 50%;
		font-size: 30px;
	}
	.all-ground{
		float: right;
		width: 45%;
		text-align: right;
		padding-right:10px;
		font-size: 20px;
		color: #666;
	}
	.ground-content,.competition-content,.product-content{
		width: 80vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.one{
		width: 20vw;
		padding-left: auto;
		padding-right: auto;
	}
	.ground-img,.competition-img,.product-img{
		width: 150px;
		height: 150px;
	}
	
</style>